<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>01_复习</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .floatLeft {
                float: left;
            }

            .floatRight {
                float: right;
            }

            .clearBox::after {
                content: "";
                display: block;
                clear: both;
            }

            #container {
                margin: 0 auto;
                width: 960px;
                text-align: center;
            }

            #container .header .logo {
                width: 200px;
                height: 80px;
                margin-right: 10px;
                background-color: #ccc;
            }

            #container .header .banner1 {
                width: 540px;
                height: 80px;
                background-color: #ccc;

            }
            #container .header .banner2 {
                width: 200px;
                height: 80px;
                background-color: #ccc;
            }


            #container .menu {
                width: 960px;
                height: 30px;
                margin-top: 10px;
                margin-bottom: 10px;
                background-color: #ccc;
            }

            #container .content .content-left .content-left-top div {
                width: 368px;
                height: 198px;
                border: 1px solid #ccc;
            }

            #container .content .content-left .content-left-top .content-left-top-one {
                margin-right: 10px;
            }

            #container .content .content-left .content-left-bottom div {
                width: 178px;
                height: 198px;
                margin: 10px 10px 10px 0;
                border: 1px solid #ccc;
            }

            #container .content .content-right div {
                width: 198px;
                height: 128px;
                margin-bottom: 10px;
                border: 1px solid #ccc;
            }


        </style>
    </head>
    <body>
        <div id="container">
            <div class="header clearBox">
                <div class="logo floatLeft">LOGO</div>
                <div class="banner1 floatLeft">BANNER1</div>
                <div class="banner2 floatRight">BANNER2</div>
            </div>

            <div class="menu">菜单</div>

            <div class="content clearBox">
                <div class="content-left floatLeft">
                    <div class="content-left-top clearBox">
                        <div class="content-left-top-one floatLeft">栏目一</div>
                        <div class="floatLeft">栏目二</div>
                    </div>
                    <div class="content-left-bottom clearBox">
                        <div class="floatLeft">栏目三</div>
                        <div class="floatLeft">栏目四</div>
                        <div class="floatLeft">栏目五</div>
                        <div class="floatLeft">栏目六</div>
                    </div>
                </div>
                <div class="content-right floatRight">
                    <div>栏目七</div>
                    <div>栏目八</div>
                    <div>栏目九</div>
                </div>
            </div>
        </div>
    </body>
</html>